<div *ngIf="responsesToShow.length">
  <table id="response-table" class="table table-bordered">
    <thead>
      <tr class="header">
        <th class="sortable-header" (click)="sortResponses(SortBy.GIVER_TEAM)" *ngIf="showGiver" [attr.aria-sort]="getAriaSort(SortBy.GIVER_TEAM)">
          <button>
            Team
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i *ngIf="sortBy === SortBy.GIVER_TEAM && sortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
              <i *ngIf="sortBy === SortBy.GIVER_TEAM && sortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortResponses(SortBy.GIVER_NAME)" *ngIf="showGiver" [attr.aria-sort]="getAriaSort(SortBy.GIVER_NAME)">
          <button>
            Giver
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i *ngIf="sortBy === SortBy.GIVER_NAME && sortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
              <i *ngIf="sortBy === SortBy.GIVER_NAME && sortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortResponses(SortBy.RECIPIENT_TEAM)" *ngIf="showRecipient" [attr.aria-sort]="getAriaSort(SortBy.RECIPIENT_TEAM)">
          <button>
            Team
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i *ngIf="sortBy === SortBy.RECIPIENT_TEAM && sortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
              <i *ngIf="sortBy === SortBy.RECIPIENT_TEAM && sortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortResponses(SortBy.RECIPIENT_NAME)" *ngIf="showRecipient" [attr.aria-sort]="getAriaSort(SortBy.RECIPIENT_NAME)">
          <button>
            Recipient
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i *ngIf="sortBy === SortBy.RECIPIENT_NAME && sortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
              <i *ngIf="sortBy === SortBy.RECIPIENT_NAME && sortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
            </span>
          </button>
        </th>
        <th>Response</th>
        <th>Comment for Response</th>
        <th class="text-center no-print actions-cell" [ngClass]="{ 'actions-cell-narrow': question.questionType === 'CONTRIB' }">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let response of responsesToShow" [class.color-neutral]="response.isMissingResponse">
        <td *ngIf="showGiver">{{ response.giverTeam }}</td>
        <td *ngIf="showGiver">
          {{ response.giver === '-' ? 'No Specific User' : response.giver}}
          {{response.giverEmail? " (" + response.giverEmail + ")" : ""}}
        </td>
        <td *ngIf="showRecipient">
          {{ response.recipientTeam === '-' ? 'No Specific Team' : response.recipientTeam}}
        </td>
        <td *ngIf="showRecipient">
          {{ response.recipient === '-' ? 'No Specific User' : response.recipient}}
          {{response.recipientEmail? " (" + response.recipientEmail + ")" : ""}}
        </td>
        <td>
          <tm-single-response [responseDetails]="response.responseDetails" [questionDetails]="question.questionDetails"
                              [giverEmail]="response.giverEmail" [recipientEmail]="response.recipientEmail" [statistics]="statistics"></tm-single-response>
        </td>
        <td>
          <div *ngIf="response.participantComment" [innerHTML]="response.participantComment.commentText | safeHtml"></div>
        </td>
        <td class="text-center no-print">
          <tm-response-moderation-button *ngIf="response.relatedGiverEmail" [session]="session" [relatedGiverEmail]="response.relatedGiverEmail"
                                         [moderatedQuestionId]="question.feedbackQuestionId" [isGiverInstructor]="question.giverType === 'INSTRUCTORS'" btnStyle="LIGHT"></tm-response-moderation-button>
          <button id="btn-add-comment" class="btn btn-light btn-sm btn-margin-left" [disabled]="isDisplayOnly"
                  *ngIf="!response.isMissingResponse && question.questionType !== 'CONTRIB'"
                  (click)="showCommentTableModel(response, commentTableModal)">Add Comment
            <span *ngIf="instructorCommentTableModel[response.responseId].commentRows.length" class="badge bg-secondary">{{this.instructorCommentTableModel[response.responseId].commentRows.length}}</span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div id="no-responses" *ngIf="!responsesToShow.length">
  <i>There are no responses for this question or you may not have the permission to see the response.</i>
</div>

<ng-template #commentTableModal let-modal>
  <tm-comment-table-modal *ngIf="currResponseToAdd" [questionShowResponsesTo]="question.showResponsesTo"
                          [activeModal]="modal"
                          [model]="instructorCommentTableModel[currResponseToAdd.responseId]"
                          [response]="currResponseToAdd"
                          (modelChange)="triggerModelChangeForSingleResponse(currResponseToAdd.responseId, $event)"
                          (saveNewCommentEvent)="triggerSaveNewCommentEvent(currResponseToAdd.responseId)"
                          (updateCommentEvent)="triggerUpdateCommentEvent(currResponseToAdd.responseId, $event)"
                          (deleteCommentEvent)="triggerDeleteCommentEvent(currResponseToAdd.responseId, $event)"
  ></tm-comment-table-modal>
</ng-template>
